import { FireOutlined, StarOutlined, TrophyOutlined } from "@ant-design/icons";
import { ProCard } from "@ant-design/pro-components";
import { Col, Progress, Row, Statistic } from "antd";

import React from "react";

const Page1: React.FC = () => {
  return (
    <div style={{ padding: 24 }}>
      <h1>进度展示页面</h1>
      <Row gutter={[16, 16]}>
        <Col span={8}>
          <ProCard>
            <Statistic
              title="完成率"
              value={75}
              suffix="%"
              prefix={<TrophyOutlined />}
            />
            <Progress percent={75} status="active" />
          </ProCard>
        </Col>
        <Col span={8}>
          <ProCard>
            <Statistic
              title="活跃度"
              value={88}
              suffix="%"
              prefix={<FireOutlined />}
            />
            <Progress percent={88} strokeColor="#52c41a" />
          </ProCard>
        </Col>
        <Col span={8}>
          <ProCard>
            <Statistic
              title="评分"
              value={4.8}
              suffix="/5"
              prefix={<StarOutlined />}
            />
            <Progress percent={96} strokeColor="#1890ff" />
          </ProCard>
        </Col>
      </Row>
    </div>
  );
};

export default Page1;
